<template>  
    <div>  
      <el-button type="primary" @click="openDialog">打开新增对话框</el-button>  
      <el-button type="primary" @click="openDialogegd">打开编辑对话框</el-button>  
      <DialogCommon v-model="dialogVisible" :title="tisits" @onCancel="handleCancel" @onSubmit="handleSubmit">  
        <template v-slot:formBox>  
          <el-form>  
            <el-form-item label="输入框">  
              <el-input v-model="inputValue"></el-input>  
            </el-form-item>  
          </el-form>  
        </template>  
      </DialogCommon>  
    </div>  
  </template>  
  
  <script>  
  import DialogCommon from './DialogCommon.vue';  
  
  export default {  
    components: {  
      DialogCommon  
    },  
    data() {  
      return {  
        dialogVisible: false,  
        inputValue: ''  ,
        id:1 ,// 模拟编辑
        tisits:''

      };  
    },  
    methods: {  
      openDialog() {  
        this.dialogVisible = true; // 打开弹窗  
        this.tisits = '新增' 
      },  
      openDialogegd(){
        if(this.id){
          this.dialogVisible = true; // 打开弹窗 
          this.tisits = '编辑' 
        }
      },
      handleCancel() {  
        console.log('取消操作'); // 可以在这里进行额外的取消操作  
      },  
      handleSubmit() {  
        console.log('提交操作，输入值:', this.inputValue); // 处理提交  
        this.dialogVisible = false; // 提交后关闭弹窗  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  /* 样式可以根据需要定制 */  
  </style>